<template>
    <div class="my-content">
        <div class="my-title">个人中心</div>
        <div class="my-list">
            <div class="my-logo">
                <img src="../../assets/img/logo.png" alt="">
            </div>
            <ul class="list">
                <li class="item">
                    <span class="txt">
                        用户名：
                        <em>18118846524</em>
                    </span>
                </li>
                <li class="item">
                    <span class="txt">资金详情</span>
                    <button class="btn fr" @click="changeRoute('/money-detail')">查看</button>
                </li>
                <li class="item">
                    <span class="txt">提现明细</span>
                    <button class="btn fr" @click="changeRoute('/withdraw-detail')">查看</button>
                </li>
                <li class="item">
                    <span class="txt">一键复投</span>
                    <button class="btn fr" @click="showRedelivery = true" v-if="changeRedelivery">复投</button>
                    <button class="btn fr" @click="showCancel = true" v-else>取消</button>
                </li>
                <li class="item">
                    <span class="txt">总业绩</span>
                    <button class="btn fr" @click="showPerformance = true">查看</button>
                </li>
                <li class="item">
                    <span class="txt">推荐关系</span>
                    <button class="btn fr" @click="changeRoute('/recommend')">查看</button>
                </li>
                <li class="item">
                    <span class="txt">
                        登录密码：
                        <em>已设置</em>
                    </span>
                    <button class="btn fr" @click="showLogin = true">修改</button>
                </li>
                <li class="item">
                    <span class="txt">
                        资金密码：
                        <em>已设置</em>
                    </span>
                    <button class="btn fr" @click="showMoney = true">修改</button>
                </li>
                <li class="item">
                    <span class="txt">
                        身份认证：
                        <em>未认证</em>
                    </span>
                    <button class="btn fr" @click="changeRoute('/identity')">认证</button>
                </li>
                <li class="item carve">
                    <span class="txt">
                        邀请返佣：
                        <em>邀请码AIKLEK</em>
                    </span>
                    <button class="btn fr" @click="showInvite = true">邀请</button>
                </li>
                <li class="item">
                    <span class="txt">下载APP</span>
                    <button class="btn fr" @click="showDownload = true">下载</button>
                </li>
                <li class="item">
                    <span class="txt">客服QQ</span>
                    <button class="btn fr" @click="showQQ = true">查看</button>
                </li>
                <li class="item carve">
                    <span class="fullTxt" @click="showExit = true">退出</span>
                </li>
            </ul>
            <div class="dialog deposit-dialog van-popup" v-if="showRedelivery">
                <div class="close" @click="showRedelivery = false"></div>
                <h3 class="dlg-title">一键复投</h3>
                <div class="content">
                    <div>开启一键复投，您的定存的一级利息将会被自动定存，让您享受复利的收益。</div>
                    <div class="btn-line">
                        <button class="btn" @click="showRedelivery = false, changeRedelivery = false ">确定</button>
                    </div>
                </div>
            </div>
            <div class="van-dialog" v-if="showCancel">
                <div class="van-dialog__header">取消复投</div>
                <div class="van-dialog__content">
                    <div class="van-dialog__message van-dialog__message--has-title">取消一键复投，您将不能享受复利，确定取消吗？</div>
                </div>
                <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons">
                    <button class="van-button van-button--default van-button--large van-dialog__cancel" @click="showCancel = false, changeRedelivery = true ">
                        <span class="van-button__text">确定取消</span>
                    </button>
                    <button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" @click="showCancel = false">
                        <span class="van-button__text">不取消</span>
                    </button>
                </div>
            </div>
            <div class="dialog achievement-dialog van-popup" v-if="showPerformance">
                <div class="close" @click="showPerformance = false"></div>
                <h3 class="dlg-title">总业绩</h3>
                <div class="content">
                    <div class="line">
                        <span class="item-title">一级下级人数：</span>
                        <span>0 人</span>
                    </div>
                    <div class="line">
                        <span class="item-title">总下级人数：</span>
                        <span>0 人</span>
                    </div>
                    <div class="line">
                        <span class="item-title">一级总业绩：</span>
                        <span>0.0 TRX</span>
                    </div>
                    <div class="line">
                        <span class="item-title">总业绩：</span>
                        <span>0.0 TRX</span>
                    </div>
                    <div class="line">
                        <span class="item-title">推荐定存业绩：</span>
                        <span>0.0 TRX</span>
                    </div>
                    <div class="tip">注：每天中午12点更新数据</div>
                </div>
            </div>
            <div class="dialog van-popup" v-if="showLogin">
                <div class="close" @click="showLogin = false"></div>
                <h3 class="dlg-title">修改登录密码</h3>
                <div class="demo-ruleForm wrap login-warp">
                    <label>
                        <div class="labelTit">手机</div>
                        <input placeholder="请输入手机号" disabled value="18118846524">
                    </label>
                    <label>
                        <div class="labelTit">验证码</div>
                        <input placeholder="请输入验证码" class="authCode">
                        <button class="authBtn">获取验证码</button>
                        <span class="error-tip" style="display: none">验证码格式错误。</span>
                    </label>
                    <label>
                        <div class="labelTit">旧密码</div>
                        <input type="password" placeholder="输入当前密码">
                        <span class="error-tip" style="display: none">密码格式不正确。</span>
                    </label>
                    <label>
                        <div class="labelTit">新密码</div>
                        <input type="password" placeholder="请输入新密码">
                        <span class="error-tip" style="display: none">8-16位，必须包含数字和字母。</span>
                    </label>
                    <label>
                        <div class="labelTit">确认密码</div>
                        <input type="password" placeholder="请再次确认密码">
                        <span class="error-tip" style="display: none">两次密码不一致。</span>
                    </label>
                    <div class="btn-line">
                        <button class="btn" @click="showLogin = false">提交</button>
                    </div>
                </div>
            </div>
            <div class="dialog van-popup" v-if="showMoney">
                <div class="close" @click="showMoney = false"></div>
                <h3 class="dlg-title">设置资金密码</h3>
                <div class="warnInfo">警告：资金密码不要与登录密码或者其他密码一致，由此产生的号码被盗，本站概不负责。</div>
                <div class="demo-ruleForm wrap money-warp">
                    <label>
                        <div class="labelTit">手机</div>
                        <input placeholder="请输入手机号" disabled value="18118846524">
                    </label>
                    <label>
                        <div class="labelTit">验证码</div>
                        <input placeholder="请输入验证码" class="authCode">
                        <button class="authBtn">获取验证码</button>
                        <span class="error-tip" style="display: none">验证码格式错误。</span>
                    </label>
                    <label>
                        <div class="labelTit">资金密码</div>
                        <input type="password" placeholder="请设置资金密码">
                        <span class="error-tip" style="display: none">8-16位，必须包含数字和字母。</span>
                    </label>
                    <label>
                        <div class="labelTit">确认密码</div>
                        <input type="password" placeholder="请再次确认密码">
                        <span class="error-tip" style="display: none">两次密码不一致。</span>
                    </label>
                    <div class="btn-line">
                        <button class="btn" @click="showMoney = false">提交</button>
                    </div>
                </div>
            </div>
            <div class="dialog van-popup invite-warp" v-if="showInvite">
                <div class="close" @click="showInvite = false"></div>
                <div class="dlg-title">邀请好友</div>
                <div class="wrap">
                    <div class="qr-code">
                        <img src="../../assets/img/qrcode.png" alt="">
                    </div>
                    <div class="grayText invite-link">http://www.trxwallet.net/userEntry/#/logup/AIKLEK</div>
                    <div class="btn-line">
                        <button class="btn" @click="showInvite = false">复制链接</button>
                    </div>
                </div>
            </div>
            <div class="dialog download-dialog van-popup" v-if="showDownload">
                <div class="close" @click="showDownload = false"></div>
                <div>
                    <div class="download-title">安装包下载</div>
                    <div class="qrcode">
                        <img src="../../assets/img/qrcode.png" alt="">
                    </div>
                    <div class="download-link">
                        <a>http://www.trxwallet.net/download</a>
                    </div>
                    <div class="download-tip">请在手机浏览器中打开链接</div>
                </div>
            </div>
            <div class="dialog van-popup" v-if="showQQ">
                <div class="close" @click="showQQ = false"></div>
                <h3 class="dlg-title">客服QQ</h3>
                <div class="wrap">
                    <div class="qr-code">
                        <img src="../../assets/img/qq.png" alt="">
                    </div>
                    <div class="qq-number-color">QQ号：2679058425</div>
                    <div class="btn-line">
                        <button class="btn" @click="showQQ = false">复制QQ号</button>
                    </div>
                </div>
            </div>
            <div class="van-dialog" v-if="showExit">
                <div class="van-dialog__header">确认退出</div>
                <div class="van-dialog__content">
                    <div class="van-dialog__message van-dialog__message--has-title">退出后您将可能收不到波点钱包的最新通知，确定退出吗？</div>
                </div>
                <div class="van-hairline--top van-dialog__footer van-dialog__footer--buttons">
                    <button class="van-button van-button--default van-button--large van-dialog__cancel" @click="showExit = false">
                        <span class="van-button__text">退出</span>
                    </button>
                    <button class="van-button van-button--default van-button--large van-dialog__confirm van-hairline--left" @click="showExit = false">
                        <span class="van-button__text">不退出</span>
                    </button>
                </div>
            </div>
            <div class="van-overlay" v-if="showRedelivery | showCancel | showPerformance | showLogin | showMoney | showInvite | showDownload | showQQ | showExit"></div>
        </div>
        <NavComponent></NavComponent>
    </div>
</template>

<script>
    export default {
        name: 'my',
        data() {
            return{
                showRedelivery: false,
                showCancel: false,
                showPerformance: false,
                showLogin: false,
                showMoney: false,
                showInvite: false,
                showDownload: false,
                showQQ: false,
                showExit: false,
                changeRedelivery:true
            }
        }
    }
</script>

<style lang="scss">
    .my-content{
        width: 100%;
        height: 100%;
        .my-title{
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            text-align: center;
            font-size: 0.34rem;
            border-bottom: 0.02rem solid #ccc;
            background-color: #fefefe;
        }
        .my-list{
            height: calc(100% - 2rem);
            background: #f7f7f7;
            overflow-y: scroll;
            .my-logo{
                background: #fff;
                padding: 0.3rem 0.3rem 0.16rem;
                height: 0.9rem;
                position: relative;
                img{
                    width: 1.25rem;
                    height: 0.38rem;
                    position: absolute;
                }
            }
            .list{
                margin-top: 0.16rem;
                text-align: left;
                padding-bottom: 1.2rem;
                .carve{
                    margin-top: 0.16rem!important;
                    .fullTxt{
                        font-size: 0.28rem;
                        line-height: 1.12rem;
                        position: absolute;
                        left: calc(50% - 0.28rem);
                    }
                }
                .item{
                    color: #333;
                    background-color: #fff;
                    margin: 0 auto;
                    border-bottom: 0.02rem solid #f3f3f3;
                    height: 1.12rem;
                    padding: 0 0.32rem;
                    position: relative;
                    .txt{
                        font-size: 0.28rem;
                        line-height: 1.12rem;
                        position: absolute;
                        em{
                            font-weight: 400;
                            color: #999;
                            font-style: normal;
                        }
                    }
                    .btn{
                        margin-top: 0.32rem;
                        line-height: 0.48rem;
                        height: 0.48rem;
                        font-size: 0.28rem;
                        width: 1.28rem;
                        text-align: center;
                        border: none;
                        outline: none;
                        border-radius: 0.5rem;
                        background-color: #e60816;
                        color: #fff;
                        user-select: none;
                        float: right;
                    }
                }
            }
            .invite-warp{
                height: 6.6rem;
            }
            .dialog{
                width: 80%;
                background-color: #fff;
                border-radius: .13333rem;
                min-height: 3rem;
                overflow: auto;
                padding: 0.3rem 0.5rem 0.4rem;
                z-index: 2026;
                .close{
                    position: absolute;
                    width: 0.32rem;
                    height: 0.32rem;
                    background: url(../../assets/img/guanbi.png) 0 0 no-repeat;
                    background-size: 100%;
                    top: 0.24rem;
                    right: 0.24rem;
                }
                .dlg-title{
                    font-size: 0.36rem;
                    color: #1d1d1d;
                    padding-top: 0.3rem;
                    text-align: center;
                    /*font-family: PingFangSC-Regular,serif;*/
                }
                .warnInfo{
                    padding: 0.2rem;
                    background: #fcf8e3;
                    border: 1px solid #f5dfa8;
                    margin: 0.14rem auto 0;
                    font-family: PingFangSC-Regular,serif;
                    font-size: 0.24rem;
                    color: #b37953;
                }
                .login-warp{
                    height: 8rem;
                }
                .money-warp{
                    height: 6.5rem;
                }
                label{
                    height: 1.2rem;
                    display: block;
                    position: relative;
                    .labelTit{
                        font-size: 0.26rem;
                        color: #4a4a4a;
                        line-height: 0.48rem;
                        margin-top: 0.28rem;
                    }
                    input{
                        width: 100%;
                        height: 0.68rem;
                        background-color: #fff;
                        border: 1px solid #e7e7e7;
                        border-radius: 0.08rem;
                        box-shadow: 0 2px 4px 0 hsla(0,0%,74%,.5);
                        padding-left: 0.2rem;
                        -webkit-appearance: none;
                        outline: none;
                        position: absolute;
                        top: 0.48rem;
                    }
                    input:disabled{
                        background-color: #f3f3f3;
                    }
                    .error-tip{
                        position: absolute;
                        color: #e22828;
                        font-size: 0.24rem;
                        margin-top: 0.7rem;
                    }
                    .authBtn{
                        display: block;
                        position: absolute;
                        line-height: 0.68rem;
                        width: 1.7rem;
                        overflow: visible;
                        right: 0;
                        bottom: 0;
                        background: none;
                        border: none;
                        color: #e60816;
                        font-size: 0.24rem;
                    }
                    .authBtn:before{
                        display: inline-block;
                        width: 0;
                        height: 0.25rem;
                        content: "";
                        border-left: 1px solid #e7e7e7;
                        position: absolute;
                        left: 0;
                        top: 0.22rem;
                    }
                }
                .wrap{
                    .qr-code{
                        width: 60%;
                        overflow: hidden;
                        margin: 0.2rem auto 0;
                        img{
                            width: 100%;
                            border: 1px solid #979797;
                            border-radius: 8px;
                        }
                    }
                    .grayText{
                        color: #999;
                        font-size: 0.28rem;
                        width: 100%;
                        word-break: break-all;
                        user-select: text;
                    }
                    .qq-number-color{
                        text-align: center;
                    }
                }
                div{
                    font-size: 0.24rem;
                    .download-title{
                        width: 100%;
                        text-align: center;
                        font-size: 0.3rem;
                        margin-bottom: 0.1rem;
                        margin-top: 0.4rem;
                    }
                    .qrcode{
                        text-align: center;
                        img{
                            width: 60%;
                            height: 60%;
                            border: 1px solid #ccc;
                            border-radius: 8px;
                        }
                    }
                    .download-link{
                        text-align: center;
                        cursor: pointer;
                        overflow-wrap: break-word;
                        word-wrap: break-word;
                        text-decoration: underline;
                        color: #00f;
                        user-select: text;
                        a{
                            text-decoration: none;
                            color: inherit;
                        }
                    }
                    .download-tip{
                        margin-top: .06667rem;
                        color: #999;
                        text-align: center;
                        cursor: pointer;
                        overflow-wrap: break-word;
                        word-wrap: break-word;
                    }
                }
                .btn-line{
                    text-align: center;
                    margin-top: 0.4rem;
                    height: 0.6rem;
                    .btn {
                        background-color: #e60816;
                        height: 0.6rem;
                        line-height: 0.6rem;
                        border-radius: 0.5rem;
                        border: none;
                        padding: 0;
                        width: 2.4rem;
                        user-select: none;
                        color: #fff;
                        font-size: 0.26rem;
                        vertical-align: top;
                    }
                }
                .content{
                    line-height: 0.4rem;
                    padding: 0.2rem 0.1rem 0;
                    font-size: 0.28rem;
                    .tip{
                        color: #666;
                        font-size: 13px;
                        margin-top: 0.4rem;
                    }
                }
            }
            .van-popup{
                position: fixed;
                top: 50%;
                left: 50%;
                max-height: 100%;
                transform: translate3d(-50%,-50%,0)
            }
            .van-dialog{
                position: fixed;
                top: 50%;
                left: 50%;
                width: 85%;
                font-size: 16px;
                overflow: hidden;
                transition: .3s;
                border-radius: 4px;
                background-color: #fff;
                transform: translate3d(-50%,-50%,0);
                backface-visibility: hidden;
                z-index: 2026;
                .van-dialog__header{
                    font-weight: 500;
                    padding-top: 25px;
                    text-align: center;
                }
                .van-dialog__content{
                    .van-dialog__message{
                        padding: 25px;
                        font-size: 14px;
                        line-height: 0.42rem;
                        max-height: 60vh;
                        overflow-y: auto;
                        text-align: center;
                    }
                    .van-dialog__message--has-title{
                        padding-top: 12px;
                        color: #7d7e80;
                    }
                }
                .van-dialog__footer--buttons{
                    display: flex;
                    border-top: 1px solid #ebedf0;
                    .van-button--large{
                        width: 100%;
                        height: 50px;
                        line-height: 48px;
                    }
                    .van-button{
                        position: relative;
                        padding: 0;
                        display: inline-block;
                        border-radius: 2px;
                        box-sizing: border-box;
                        font-size: 16px;
                        text-align: center;
                        -webkit-appearance: none;
                        border: 0;
                        -webkit-box-flex: 1;
                        flex: 1;
                        outline: none;
                    }
                    .van-button:before{
                        content: " ";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        opacity: 0;
                        width: 100%;
                        height: 100%;
                        border-top: 1px solid #ebedf0;
                        background-color: #000;
                        border-radius: inherit;
                        transform: translate(-50%,-50%);
                    }
                    .van-hairline--left:after{
                        content: " ";
                        position: absolute;
                        pointer-events: none;
                        top: -50%;
                        left: -50%;
                        right: -50%;
                        bottom: -50%;
                        transform: scale(.5);
                    }
                    .van-dialog__confirm{
                        color: #1989fa;
                        border-left: 1px solid #ebedf0;
                    }
                    .van-button--default{
                        background-color: #fff;
                    }
                }
                .van-dialog__footer{
                    overflow: hidden;
                    user-select: none;
                }
            }
            .van-overlay{
                z-index: 2025;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,0.7);
            }
        }
    }
</style>
